$.fn.extend({
    jselect: function () {
        return $(this).each(function () {
            $(this).after("<input type=\"hidden\" /><div class='jslct'><div class='jslct_t'><em></em></div><dl></dl></div>");
            var ipt = $(this).next("input");
            ipt[0].value = $(this).val();
            var lst = ipt.next("div");
            lst.attr("max-height", $(this).attr('max-height'));
            var itms = $("dl", lst);
            var itm;
            if (this.options.length == 0) {
                var nullOption = document.createElement("option");
                nullOption.appendChild(document.createTextNode('-'));
                nullOption.setAttribute("value", '');
                this.appendChild(nullOption);
            }

            var opt = $("option", $(this));
            var opts = $("option:selected", $(this));
            var opts_index = opt.index(opts);
            var em = $("em", lst);
            em.css("height", "12px");
            var fn_change = $(this).attr("onchange");
            var cssWidth = this.style.width; //因为ff取不到auto
            //var cssWidth = $(this).css("width"); // 146px
            var width = $(this).css("width");
            if (cssWidth != "" && cssWidth.indexOf("px") > 0) {
                var width = parseInt(cssWidth.substr(0, cssWidth.length - 2)) + 5;
                cssWidth = width.toString() + "px";
            }
            if (cssWidth != "") { lst.css("width", cssWidth); em.css("width", "100%"); };
            var cssFloat = $(this).css("float");
            if (cssFloat != "")
                lst.css("float", cssFloat);

            ipt.attr("name", $(this).attr("name"));
            ipt.attr("id", $(this).attr("id"));
            em.text($("option:selected", $(this)).text());
            opt.each(function (i) {
                itms.append("<dd></dd>");
                itm = $("dd", itms);
                var dd = itm.eq(i);
                dd.attr("val", $(this).val()).text($(this).text());
            });
            itm.eq(0).addClass("noborder")
            itm.eq(opts_index).addClass("jslcted");
            $(this).remove();
            lst.hover(function () { $(this).addClass("jslct_hover"); return false }, function () { $(this).removeClass("jslct_hover"); return false });
            itm.hover(function () { $(this).addClass("hover") }, function () { $(this).removeClass("hover") });
            var childWith = itms.width() + 17;
            childWith = childWith < width - 17 ? width - 17 : childWith;
            itm.width(childWith);
            itms.css({ width: childWith + 9, "overflow-x": "hidden", "overflow-y": "auto" });
            lst.click(function () { lstshow(); });
            $(document).mouseup(function () { lsthide(); });
            itm.click(function () {
                itm.removeClass("jslcted");
                $(this).addClass("jslcted");
                em.text($(this).text());
                ipt.val($(this).attr("val"));
                lsthide();
                if (fn_change != null) { (eval(fn_change))(ipt); }
                return false;
            })
            function lstshow() {
                var maxheight = 200;
                var maxheightStr = lst.attr('max-height');
                if (maxheightStr != undefined) {
                    if (maxheightStr != "" && maxheightStr.indexOf("px") > 0) {
                        maxheight = parseInt(maxheightStr.substr(0, maxheightStr.length - 2));
                    }
                    if (maxheight > $(document).height() - 200)
                        maxheight = $(document).height() - 200;
                }

                itms.css({ height: "auto" });
                maxheight = itms.height() > maxheight ? maxheight : "auto";
                itms.css({ height: maxheight });
                itms.show();
                lst.css("z-index", "1000")
            };
            function lsthide() {
                $(".jslct dl").hide();
                $(".jslct").css("z-index", "0")
            };
        });
    },

    readonly: function () {
        return $(this).each(function () {
            $(this).after("<input type=\"hidden\" /><div class='jslct readonlyJslct'><div class='jslct_t'><em></em></div><dl></dl></div>");
            var ipt = $(this).next("input");
            ipt[0].value = $(this).val();
            var lst = ipt.next("div");
            var itms = $("dl", lst);
            var itm;
            if (this.options.length == 0) {
                var nullOption = document.createElement("option");
                nullOption.appendChild(document.createTextNode('-'));
                nullOption.setAttribute("value", '');
                this.appendChild(nullOption);
            }

            var opt = $("option", $(this));
            var opts = $("option:selected", $(this));
            var opts_index = opt.index(opts);
            var em = $("em", lst);
            em.css("height", "12px");
            var fn_change = $(this).attr("onchange");
            var cssWidth = this.style.width;
            var width = 155;
            if (cssWidth != "" && cssWidth.indexOf("px") > 0) {
                var width = parseInt(cssWidth.substr(0, cssWidth.length - 2)) + 5;
                cssWidth = width.toString() + "px";
            }
            if (cssWidth != "") { lst.css("width", cssWidth); em.css("width", "100%"); };
            var cssFloat = $(this).css("float");
            if (cssFloat != "")
                lst.css("float", cssFloat);

            ipt.attr("name", $(this).attr("name"));
            ipt.attr("id", $(this).attr("id"));
            em.text($("option:selected", $(this)).text());
            opt.each(function (i) {
                itms.append("<dd></dd>");
                itm = $("dd", itms);
                var dd = itm.eq(i);
                dd.attr("val", $(this).val()).text($(this).text());
            });
            itm.eq(0).addClass("noborder")
            itm.eq(opts_index).addClass("jslcted");
            $(this).remove();
            var childWith = itms.width() + 17;
            childWith = childWith < width - 17 ? width - 17 : childWith;
            itm.width(childWith);
            itms.css({ width: childWith + 9, "overflow-x": "hidden", "overflow-y": "auto" });
        });
    }
});


